<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第4讲  Vue.js Class 与 Style 绑定</title>
		<script type="text/javascript" src="../public/vue.js"></script>
		<style>
			body{
				padding: 20px 50px;
				font-size: 18px;
			}

			.titleColor {
				color: red;
				font-size: 24px;
				font-weight: bolder;
				margin-bottom: 30px;
			}
			.red{color:pink;font-size: 22px;text-indent: 1em;}
			#app1,#app2,#app3,#app4,#app5,#app6,#app7{
				font-size: 22px;
				text-indent: 1em;
			}
		</style>		
	</head>
	<body>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第1个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div>
			<span class="titleColor">
				第1个（ 在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组）:
			</span> <br/>		

			<div id="app" :class="test">
				test...
			</div>			
		</div><br/>

		<script type="text/javascript">
			var vue = new Vue({
				el : '#app',
				data : {
					test : 'red'
				}
			});
		</script>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div >
			<span class="titleColor">
				第2个（ 我们可以传给 v-bind:class 一个对象，以动态地切换 class： ~~~~~语法：v-bind:class="{ active: isActive, 'text-danger': hasError }"）:
			</span> <br/>		

			<div id="app1" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
				我们可以传给 v-bind:class 一个对象，以动态地切换 class~~~请F12查看标签变化
			</div>			
		</div><br/>
		<pre>
			var vue = new Vue({
				el : '#app1',
				data : {
					isActive: true,
					hasError: false
				}
			});
			//渲染为：class="static active"

			var vue = new Vue({
				el : '#app1',
				data : {
					isActive: true,
					hasError: true
				}
			});
			//渲染为：class="static active text-danger	
		</pre>

		<script type="text/javascript">
			var vue = new Vue({
				el : '#app1',
				data : {
					isActive: true,
					hasError: false
				}
			});
			//渲染为：<div class="static active"></div>

			var vue = new Vue({
				el : '#app1',
				data : {
					isActive: true,
					hasError: true
				}
			});
			//渲染为：<div class="static active text-danger"></div>
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2.1个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div >
			<span class="titleColor">
				第2.1个（ #app2你也可以直接绑定数据里的一个对象： ~~~~~语法： v-bind:class="classObject"
			</span> <br/>		

			<div id="app2"  v-bind:class="classObject">
				你也可以直接绑定数据里的一个对象~~~请F12查看标签变化
			</div>			
		</div><br/>
		<pre>
			var vue = new Vue({
			el : '#app2',
			data:{
					classObject : {
						active: true,
						'text-danger': false,
						'showNewClass':true,
					}				
				}
			});
			//渲染为：class="active showNewClass			
		</pre>

		<script type="text/javascript">			
			var vue = new Vue({
				el : '#app2',
				data:{
					classObject : {
						active: true,
						'text-danger': false,
						'showNewClass':true,
					}				
				}
			});
			//渲染为：<div class="active showNewClass"></div>
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2.2个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div >
			<span class="titleColor">
				第2.2个（ #app3我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式 ~~~~~语法： v-bind:class="classObject"
			</span> <br/>		

			<div id="app3"  v-bind:class="classObject">
				我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式
			</div>		
			<pre>

			</pre>
		</div><br/>

		<script type="text/javascript">			
			var vue = new Vue({
				el : '#app3',
				data : {
					isActive:true,
					error:false
				},
				computed:{
					classObject: function () {
						return {
							active : this.isActive && !this.error,
							'text-danger': this.error && this.error.type === 'fatal',
						}
					}
				}
			});
		</script>

	</body>
</html>












































